<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>API修复测试</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        .test-section {
            margin: 20px 0;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        button {
            background: #007bff;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            margin: 5px;
        }
        button:hover {
            background: #0056b3;
        }
        .result {
            margin-top: 10px;
            padding: 10px;
            border-radius: 5px;
            white-space: pre-wrap;
        }
        .success {
            background: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }
        .error {
            background: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }
    </style>
</head>
<body>
    <h1>🧪 API修复测试页面</h1>
    
    <div class="test-section">
        <h3>1. 健康检查测试</h3>
        <button onclick="testHealth()">测试健康检查</button>
        <div id="healthResult" class="result"></div>
    </div>

    <div class="test-section">
        <h3>2. 文本对话测试</h3>
        <input type="text" id="textInput" placeholder="输入测试文本" value="你好">
        <button onclick="testTextChat()">测试文本对话</button>
        <div id="textResult" class="result"></div>
    </div>

    <div class="test-section">
        <h3>3. WebSocket连接测试</h3>
        <button onclick="testWebSocket()">测试WebSocket连接</button>
        <button onclick="disconnectWebSocket()">断开连接</button>
        <div id="wsResult" class="result"></div>
    </div>

    <script>
        const API_BASE = 'http://localhost:8123/api';
        const WS_URL = 'ws://localhost:8123/api/ws/voice-chat';
        let ws = null;

        // 测试健康检查
        async function testHealth() {
            const resultDiv = document.getElementById('healthResult');
            try {
                resultDiv.textContent = '正在测试...';
                
                const response = await fetch(`${API_BASE}/chat/health`);
                const data = await response.json();
                
                console.log('健康检查响应:', data);
                
                if (data.code === 200) {
                    resultDiv.className = 'result success';
                    resultDiv.textContent = `✅ 健康检查成功\n响应: ${data.message}\n数据: ${data.data}\n耗时: ${data.processingTime || 0}ms`;
                } else {
                    resultDiv.className = 'result error';
                    resultDiv.textContent = `❌ 健康检查失败\n错误: ${data.message}`;
                }
            } catch (error) {
                resultDiv.className = 'result error';
                resultDiv.textContent = `❌ 请求失败: ${error.message}`;
            }
        }

        // 测试文本对话
        async function testTextChat() {
            const resultDiv = document.getElementById('textResult');
            const textInput = document.getElementById('textInput').value;
            
            if (!textInput.trim()) {
                resultDiv.className = 'result error';
                resultDiv.textContent = '请输入测试文本';
                return;
            }

            try {
                resultDiv.textContent = '正在处理...';
                
                const requestData = {
                    textInput: textInput,
                    sessionId: Date.now().toString()
                };

                const response = await fetch(`${API_BASE}/chat/voice`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify(requestData)
                });

                const data = await response.json();
                console.log('文本对话响应:', data);

                if (data.code === 200 && data.data) {
                    const chatData = data.data;
                    resultDiv.className = 'result success';
                    resultDiv.textContent = `✅ 文本对话成功
请求: ${textInput}
AI回复: ${chatData.aiResponse}
识别文本: ${chatData.recognizedText}
处理时间: ${chatData.processingTime}ms
音频数据长度: ${chatData.audioBase64 ? chatData.audioBase64.length : 0}`;
                } else {
                    resultDiv.className = 'result error';
                    resultDiv.textContent = `❌ 对话失败\n错误: ${data.message}`;
                }
            } catch (error) {
                resultDiv.className = 'result error';
                resultDiv.textContent = `❌ 请求失败: ${error.message}`;
            }
        }

        // 测试WebSocket连接
        function testWebSocket() {
            const resultDiv = document.getElementById('wsResult');
            
            try {
                resultDiv.textContent = '正在连接WebSocket...';
                
                ws = new WebSocket(WS_URL);
                
                ws.onopen = function() {
                    resultDiv.className = 'result success';
                    resultDiv.textContent = '✅ WebSocket连接成功';
                };
                
                ws.onmessage = function(event) {
                    try {
                        const data = JSON.parse(event.data);
                        console.log('WebSocket消息:', data);
                        
                        const currentText = resultDiv.textContent;
                        resultDiv.textContent = currentText + '\n📨 收到消息: ' + JSON.stringify(data, null, 2);
                    } catch (error) {
                        console.error('解析WebSocket消息失败:', error);
                    }
                };
                
                ws.onerror = function(error) {
                    resultDiv.className = 'result error';
                    resultDiv.textContent = '❌ WebSocket连接失败: ' + error;
                };
                
                ws.onclose = function(event) {
                    const currentText = resultDiv.textContent;
                    resultDiv.textContent = currentText + '\n🔌 连接已关闭: ' + event.code + ' - ' + event.reason;
                };
                
            } catch (error) {
                resultDiv.className = 'result error';
                resultDiv.textContent = '❌ WebSocket创建失败: ' + error.message;
            }
        }

        // 断开WebSocket连接
        function disconnectWebSocket() {
            if (ws) {
                ws.close();
                ws = null;
            }
        }

        // 页面加载完成后自动测试健康检查
        window.onload = function() {
            console.log('页面加载完成，开始自动测试');
            setTimeout(testHealth, 1000);
        };
    </script>
</body>
</html>
